﻿﻿﻿<!--_meta 作为公共模版分离出去-->
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="Bookmark" href="favicon.ico">
    <link rel="Shortcut Icon" href="favicon.ico"/>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="lib/html5.js"></script>
    <script type="text/javascript" src="lib/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css"/>
    <link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css"/>
    <!--自定义工具-->
    <script type="text/javascript" src="js/HttpUtil.js"></script>
    <!--导入 vue 包-->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <!--[if IE 6]>
    <script type="text/javascript" src="http://lib.h-ui.net/DD_belatedPNG_0.0.8a-min.js"></script>
    <script>DD_belatedPNG.fix('*');</script><![endif]-->
    <!--/meta 作为公共模版分离出去-->

    <title>会员列表 - 会员管理 - H-ui.admin v3.0</title>
    <meta name="keywords" content="H-ui.admin v3.0,H-ui网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载">
    <meta name="description" content="H-ui.admin v3.0，是一款由国人开发的轻量级扁平化网站后台模板，完全免费开源的网站后台管理系统模版，适合中小型CMS后台系统。">
</head>
<body>
<div id="show_user">
    <!--_header 作为公共模版分离出去-->
    <header class="navbar-wrapper">
        <div class="navbar navbar-fixed-top">
            <div class="container-fluid cl"><a class="logo navbar-logo f-l mr-10 hidden-xs" href="/aboutHui.shtml">H-ui.admin</a>
                <a class="logo navbar-logo-m f-l mr-10 visible-xs" href="/aboutHui.shtml">H-ui</a> <span
                        class="logo navbar-slogan f-l mr-10 hidden-xs">v3.0</span> <a aria-hidden="false"
                                                                                      class="nav-toggle Hui-iconfont visible-xs"
                                                                                      href="javascript:;">&#xe667;</a>
                <nav class="nav navbar-nav">
                    <ul class="cl">
                        <li class="dropDown dropDown_hover"><a href="javascript:;" class="dropDown_A"><i
                                class="Hui-iconfont">&#xe600;</i> 新增 <i class="Hui-iconfont">&#xe6d5;</i></a>
                            <ul class="dropDown-menu menu radius box-shadow">
                                <li><a href="javascript:;" onclick="article_add('添加资讯','article-add.html')"><i
                                        class="Hui-iconfont">&#xe616;</i> 资讯</a></li>
                                <li><a href="javascript:;" onclick="picture_add('添加资讯','picture-add.html')"><i
                                        class="Hui-iconfont">&#xe613;</i> 图片</a></li>
                                <li><a href="javascript:;" onclick="product_add('添加资讯','product-add.html')"><i
                                        class="Hui-iconfont">&#xe620;</i> 产品</a></li>
                                <li><a href="javascript:;" onclick="member_add('添加用户','member-add.html','','510')"><i
                                        class="Hui-iconfont">&#xe60d;</i> 用户</a></li>
                            </ul>
                        </li>
                    </ul>
                </nav>
                <nav id="Hui-userbar" class="nav navbar-nav navbar-userbar hidden-xs">
                    <ul class="cl">
                        <li>超级管理员</li>
                        <li class="dropDown dropDown_hover"><a href="#" class="dropDown_A">admin <i
                                class="Hui-iconfont">&#xe6d5;</i></a>
                            <ul class="dropDown-menu menu radius box-shadow">
                                <li><a href="javascript:;" onClick="myselfinfo()">个人信息</a></li>
                                <li><a href="login.html">切换账户</a></li>
                                <li><a href="#">退出</a></li>
                            </ul>
                        </li>
                        <li id="Hui-msg"><a href="#" title="消息"><span class="badge badge-danger">1</span><i
                                class="Hui-iconfont" style="font-size:18px">&#xe68a;</i></a></li>
                        <li id="Hui-skin" class="dropDown right dropDown_hover"><a href="javascript:;"
                                                                                   class="dropDown_A"
                                                                                   title="换肤"><i class="Hui-iconfont"
                                                                                                 style="font-size:18px">&#xe62a;</i></a>
                            <ul class="dropDown-menu menu radius box-shadow">
                                <li><a href="javascript:;" data-val="default" title="默认（黑色）">默认（黑色）</a></li>
                                <li><a href="javascript:;" data-val="blue" title="蓝色">蓝色</a></li>
                                <li><a href="javascript:;" data-val="green" title="绿色">绿色</a></li>
                                <li><a href="javascript:;" data-val="red" title="红色">红色</a></li>
                                <li><a href="javascript:;" data-val="yellow" title="黄色">黄色</a></li>
                                <li><a href="javascript:;" data-val="orange" title="橙色">橙色</a></li>
                            </ul>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>
    <!--/_header 作为公共模版分离出去-->

    <!--_menu 作为公共模版分离出去-->
    <aside class="Hui-aside">

        <div class="menu_dropdown bk_2">
            <dl id="menu-article">
                <dt><i class="Hui-iconfont">&#xe616;</i> 资讯管理<i class="Hui-iconfont menu_dropdown-arrow">&#xe6d5;</i>
                </dt>
                <dd>
                    <ul>
                        <li><a href="article-list.html" title="资讯管理">资讯管理</a></li>
                    </ul>
                </dd>
            </dl>
            <dl id="menu-picture">
                <dt><i class="Hui-iconfont">&#xe613;</i> 图片管理<i class="Hui-iconfont menu_dropdown-arrow">&#xe6d5;</i>
                </dt>
                <dd>
                    <ul>
                        <li><a href="picture-list.html" title="图片管理">图片管理</a></li>
                    </ul>
                </dd>
            </dl>
            <dl id="menu-product">
                <dt><i class="Hui-iconfont">&#xe620;</i> 产品管理<i class="Hui-iconfont menu_dropdown-arrow">&#xe6d5;</i>
                </dt>
                <dd>
                    <ul>
                        <li><a href="product-brand.html" title="品牌管理">品牌管理</a></li>
                        <li><a href="product-category.html" title="分类管理">分类管理</a></li>
                        <li><a href="product-list.html" title="产品管理">产品管理</a></li>
                    </ul>
                </dd>
            </dl>
            <dl id="menu-comments">
                <dt><i class="Hui-iconfont">&#xe622;</i> 评论管理<i class="Hui-iconfont menu_dropdown-arrow">&#xe6d5;</i>
                </dt>
                <dd>
                    <ul>
                        <li><a href="http://h-ui.duoshuo.com/admin/" title="评论列表">评论列表</a></li>
                        <li><a href="feedback-list.html" title="意见反馈">意见反馈</a></li>
                    </ul>
                </dd>
            </dl>
            <dl id="menu-member">
                <dt class="selected"><i class="Hui-iconfont">&#xe60d;</i> 会员管理<i
                        class="Hui-iconfont menu_dropdown-arrow">&#xe6d5;</i>
                </dt>
                <dd style="display: block;">
                    <ul>
                        <li class="current"><a href="member-list.html" title="会员列表">会员列表</a></li>
                        <li><a href="member-del.html" title="删除的会员">删除的会员</a></li>
                        <li><a href="member-level.html" title="等级管理">等级管理</a></li>
                        <li><a href="member-scoreoperation.html" title="积分管理">积分管理</a></li>
                        <li><a href="member-record-browse.html" title="浏览记录">浏览记录</a></li>
                        <li><a href="member-record-download.html" title="下载记录">下载记录</a></li>
                        <li><a href="member-record-share.html" title="分享记录">分享记录</a></li>
                    </ul>
                </dd>
            </dl>
            <dl id="menu-admin">
                <dt><i class="Hui-iconfont">&#xe62d;</i> 管理员管理<i class="Hui-iconfont menu_dropdown-arrow">&#xe6d5;</i>
                </dt>
                <dd>
                    <ul>
                        <li><a href="admin-role.html" title="角色管理">角色管理</a></li>
                        <li><a href="admin-permission.html" title="权限管理">权限管理</a></li>
                        <li><a href="admin-list.html" title="管理员列表">管理员列表</a></li>
                    </ul>
                </dd>
            </dl>
            <dl id="menu-tongji">
                <dt><i class="Hui-iconfont">&#xe61a;</i> 系统统计<i class="Hui-iconfont menu_dropdown-arrow">&#xe6d5;</i>
                </dt>
                <dd>
                    <ul>
                        <li><a href="charts-1.html" title="折线图">折线图</a></li>
                        <li><a href="charts-2.html" title="时间轴折线图">时间轴折线图</a></li>
                        <li><a href="charts-3.html" title="区域图">区域图</a></li>
                        <li><a href="charts-4.html" title="柱状图">柱状图</a></li>
                        <li><a href="charts-5.html" title="饼状图">饼状图</a></li>
                        <li><a href="charts-6.html" title="3D柱状图">3D柱状图</a></li>
                        <li><a href="charts-7.html" title="3D饼状图">3D饼状图</a></li>
                    </ul>
                </dd>
            </dl>
            <dl id="menu-system">
                <dt><i class="Hui-iconfont">&#xe62e;</i> 系统管理<i class="Hui-iconfont menu_dropdown-arrow">&#xe6d5;</i>
                </dt>
                <dd>
                    <ul>
                        <li><a href="system-base.html" title="系统设置">系统设置</a></li>
                        <li><a href="system-category.html" title="栏目管理">栏目管理</a></li>
                        <li><a href="system-data.html" title="数据字典">数据字典</a></li>
                        <li><a href="system-shielding.html" title="屏蔽词">屏蔽词</a></li>
                        <li><a href="system-log.html" title="系统日志">系统日志</a></li>
                    </ul>
                </dd>
            </dl>
        </div>
    </aside>
    <div class="dislpayArrow hidden-xs"><a class="pngfix" href="javascript:void(0);" onClick="displaynavbar(this)"></a>
    </div>
    <!--/_menu 作为公共模版分离出去-->
    <button class="btn-refresh" @click="getUserList()"  hidden="hidden">aa</button>
    <section class="Hui-article-box">
        <nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 用户中心 <span
                class="c-gray en">&gt;</span> 会员列表<a class="btn btn-success radius r"
                                                     style="line-height:1.6em;margin-top:3px"
                                                     href="javascript:location.replace(location.href);" title="刷新"><i
                class="Hui-iconfont">&#xe68f;</i></a></nav>
        <div class="Hui-article">
            <article class="cl pd-20">
                <div class="text-c">
                    <input type="text" class="input-text" style="width:250px" placeholder="输入会员名称" :value="searchName" v-model="searchName" @input="searchByName($event)">
                    <button type="submit" class="btn btn-success radius" id="" name="" @click="search">
                        <i class="Hui-iconfont">&#xe665;</i>
                        搜用户
                    </button>
                </div>
                <div class="cl pd-5 bg-1 bk-gray mt-20">
				<span class="l">
				<a href="javascript:;" @click="dataDel()" class="btn btn-danger radius">
					<i class="Hui-iconfont">&#xe6e2;</i> 批量删除
				</a>
				<a href="javascript:;" @click="member_add('添加用户','member-add.html','800','510')"
                   class="btn btn-primary radius">
					<i class="Hui-iconfont">&#xe600;</i> 添加用户
				</a>
				</span>
                    <span class="r">共有数据：<strong>{{list.length}}</strong> 条</span></div>
                <div class="mt-20">
                    <table class="table table-border table-bordered table-hover table-bg">
                        <thead>
                        <tr class="text-c">
                            <th width="25"><input type="checkbox" id="checkbox"  v-model="checked" @change="changeAllChecked()"></th>
                            <th width="80">ID</th>
                            <th width="100">用户名</th>
                            <th width="90">手机</th>
                            <th width="150">邮箱</th>
                            <th width="130">加入时间</th>
                            <th width="70">状态</th>
                            <th width="100">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr class="text-c" v-for="user in list">
                            <td><input type="checkbox" id="user" :value="user" v-model="checkedIds" ></td>
                            <td>{{user.userID}}</td>
                            <td><u style="cursor:pointer" class="text-primary"
                                   @click="member_show('用户信息','member-show.html',user.userID,'360','400')">{{user.userName}}</u>
                            </td>
                            <td>{{user.phoneNumber}}</td>
                            <td>{{user.email}}</td>
                            <td>{{user.createTime}}</td>
                            <td class="td-status" v-if="user.userStatus==0">
                                <span class="label label-success radius">已启用</span>
                            </td>
                            <td class="td-status" v-if="user.userStatus==3">
                                <span class="label label-success radius">已停用</span>
                            </td>
                            <td class="td-manage">
                                <a v-if="user.userStatus==0" style="text-decoration:none" @click="member_stop(user)" href="javascript:;"
                                   title="停用">
                                    <i class="Hui-iconfont">&#xe631;</i>
                                </a>
                                <a v-if="user.userStatus==3" style="text-decoration:none" @click="member_start(user)" href="javascript:;"
                                   title="启用">
                                    <i class="Hui-iconfont">&#xe631;</i>
                                </a>
                                <a title="编辑" href="javascript:;"
                                   @click="member_edit('编辑','member-update.html',user.userID,'800','510')"
                                   class="ml-5" style="text-decoration:none">
                                    <i class="Hui-iconfont">&#xe6df;</i>
                                </a>
                                <a style="text-decoration:none" class="ml-5"
                                   onClick="change_password('修改密码','change-password.html','10001','600','270')"
                                   href="javascript:;" title="修改密码">
                                    <i class="Hui-iconfont">&#xe63f;</i>
                                </a>
                                <a title="删除" href="javascript:;" @click="delete_user(user)" class="ml-5"
                                   style="text-decoration:none">
                                    <i class="Hui-iconfont">&#xe6e2;</i>
                                </a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </article>
        </div>
    </section>
</div>

<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="js/admin.check.login.js"></script>
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.js"></script>
<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.page.js"></script>
<!--/_footer /作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="lib/datatables/1.10.15/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript">

    var vm = new Vue({
        el: "#show_user",
        data: {
            list: [],
            checkedIds:[],
            checkArr:[],
            checked:false,
            searchName:"",
        },
        methods: {
            //ajax方式获取用户信息
            getUserList: function () {
                let vue_quote = this;
                //获取后台数据
                let url = "/user/findAllUser1.do";
                /**
                 * 发起GET方式的ajax请求，获取后台数据
                 * function 为请求完成之后调用的回调函数(请求完成后要做的事情)
                 */
                get(url, function (data) {
                    vue_quote.list = data;
                    console.log(vue_quote.list)
                });
            },

            /*通过名字查找管理员信息*/
            search(){
                let This=this;
                let url="/user/findUserByName.do";
                let params={userName:this.searchName}
                console.log(params)
                postWithParams(url,params,function (data) {
                    console.log(data)
                    This.list=data;
                })
            },

            /*input输入框赋值*/
            searchByName(event){
                let inputValue = event.currentTarget.value;
                this.searchName = inputValue;
            },

            /*用户-停用*/
            member_stop(user) {
                let This=this;
                let url = "/user/updateUser.do";
                let params={
                    userID: user.userID,
                    userName:user.userName,
                    password:user.password,
                    phoneNumber:user.phoneNumber,
                    email:user.email,
                    userStatus:3
                }
                layer.confirm('确认要停用吗？', function () {
                    postWithParams(url, params, function () {
                        This.getUserList()
                    })
                    layer.msg('已停用!', {icon: 5, time: 1000});
                });
            },

            /*用户-启用*/
            member_start(user) {
                let This=this;
                let url = "/user/updateUser.do";
                let params={
                    userID: user.userID,
                    userName:user.userName,
                    password:user.password,
                    phoneNumber:user.phoneNumber,
                    email:user.email,
                    userStatus:0
                }
                layer.confirm('确认要启用吗？', function () {
                    postWithParams(url, params, function () {
                        This.getUserList()
                    })
                    layer.msg('已启用!', {icon: 6, time: 1000});
                });
            },

            /*批量删除(修改用户状态值)*/
            dataDel(){
                let This=this;
                This.checkedIds.forEach(function (user) {
                    let url = "/user/updateUser.do";
                    let params = {
                        userID: user.userID,
                        userName:user.userName,
                        password:user.password,
                        phoneNumber:user.phoneNumber,
                        email:user.email,
                        userStatus:2
                    };
                    console.log(params)
                    layer.confirm('确认要删除吗？', function () {
                        postWithParams(url, params, function () {
                            This.getUserList();
                        })
                        layer.msg('已删除!', {icon: 1, time: 1000});
                    });
                });
            },

            /*删除用户(修改用户状态值)*/
            delete_user: function (user) {
                let This = this;
                let url = "/user/updateUser.do";
                let params = {
                    userID: user.userID,
                    userName:user.userName,
                    password:user.password,
                    phoneNumber:user.phoneNumber,
                    email:user.email,
                    userStatus:2
                };
                console.log(params)
                layer.confirm('确认要删除吗？', function () {
                    postWithParams(url, params, function () {
                        This.getUserList()
                    })
                    layer.msg('已删除!', {icon: 1, time: 1000});
                });
            },

            /*全选/全不选*/
            changeAllChecked(){
                let This=this;
                if (this.checked) {
                    this.list.forEach(function (user) {
                        This.checkArr.push(user)
                    })
                    This.checkedIds=This.checkArr;
                    This.checkArr=[];
                } else {
                    This.checkedIds=[];
                }
                console.log(This.checkedIds)
            },

            /*用户-添加*/
            member_add(title, url, w, h) {
                layer_show(title, url, w, h);
            },

            /*查看用户*/
            member_show(title, url, userID, w, h) {
                console.log(userID)
                url = url + "?userId=" + userID;
                console.log(url)
                layer_show(title, url, w, h);
            },

            /*编辑用户*/
            member_edit(title, url, userID, w, h) {
                console.log(userID)
                url = url + "?userId=" + userID;
                layer_show(title, url, w, h);
            }
        },

        watch: {
            /*监听选择框*/
            "checkedIds":function () {
                if (this.checkedIds.length==this.list.length){
                    this.checked=true;
                }else {this.checked=false;}
            }
        },

        /**
         * 页面加载完成，并且Vue对象加载完成之后回调该函数：mounted
         */
        mounted: function () {
            this.getUserList();
        }
    });

    $(function () {
        $('.table-sort').dataTable({
            "aaSorting": [[1, "desc"]],//默认第几个排序
            "bStateSave": true,//状态保存
            "aoColumnDefs": [
                //{"bVisible": false, "aTargets": [ 3 ]} //控制列的隐藏显示
                {"orderable": false, "aTargets": [0, 8, 9]}// 制定列不参与排序
            ]
        });
        $('.table-sort tbody').on('click', 'tr', function () {
            if ($(this).hasClass('selected')) {
                $(this).removeClass('selected');
            } else {
                table.$('tr.selected').removeClass('selected');
                $(this).addClass('selected');
            }
        });
    });


    /*用户-添加*/
    function member_add(title, url, w, h) {
        layer_show(title, url, w, h);
    }

    /*用户-查看*/
    function member_show(title, url, id, w, h) {
        layer_show(title, url, w, h);
    }

    /*用户-停用*/
    function member_stop(obj, id) {
        layer.confirm('确认要停用吗？', function (index) {
            $(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" onClick="member_start(this,id)" href="javascript:;" title="启用"><i class="Hui-iconfont">&#xe6e1;</i></a>');
            $(obj).parents("tr").find(".td-status").html('<span class="label label-defaunt radius">已停用</span>');
            $(obj).remove();
            layer.msg('已停用!', {icon: 5, time: 1000});
        });
    }

    /*用户-启用*/
    function member_start(obj, id) {
        layer.confirm('确认要启用吗？', function (index) {
            $(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" onClick="member_stop(this,id)" href="javascript:;" title="停用"><i class="Hui-iconfont">&#xe631;</i></a>');
            $(obj).parents("tr").find(".td-status").html('<span class="label label-success radius">已启用</span>');
            $(obj).remove();
            layer.msg('已启用!', {icon: 6, time: 1000});
        });
    }

    /*用户-编辑*/
    function member_edit(title, url, id, w, h) {
        layer_show(title, url, w, h);
    }

    /*密码-修改*/
    function change_password(title, url, id, w, h) {
        layer_show(title, url, w, h);
    }

    /*用户-删除*/
    function member_del(obj, id) {
        layer.confirm('确认要删除吗？', function (index) {
            $(obj).parents("tr").remove();
            layer.msg('已删除!', {icon: 1, time: 1000});
        });
    }
</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>